<template>
    <div :style="{minHeight: h}" class="main">
        <header-1 class="d1">
            <template v-slot:center>
               <span class="center">
                    编辑满赠活动
               </span>
            </template>
            <template v-slot:right>
               <span class="right" @click="shuoming">
                    说明
               </span>
            </template>
        </header-1>
        <div class="show">
            <div class="show1">
                <span>满赠规则</span>
                <div class="showm3">
                    <div class="showm3_1" @click="add">
                        <span>添加规则0/5</span>
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                    </div>
                </div>
            </div>
            <div v-show="obj.length" class="www"  v-for="(item,index) in obj" :key="index">
                <div class="www1">
                    <p><span>[NO.{{index+1}}]</span><img class="www2" src="https://cdn3.axureshop.com/demo/1525603/images/%E7%BC%96%E8%BE%91%E5%95%86%E5%93%81_%E5%8D%95%E5%93%81/u1858.png" @click="del(index)" /></p>
                    <p><span>赠送条件</span><span>{{item.money}}</span></p>
                    <p><span>赠品中文名称</span><span>{{item.name}}</span></p>
                    <p><span>赠品英文名称</span><span>{{item.usname}}</span></p>
                    <p><span>赠送数量</span><span>{{item.num}}</span></p>
                </div>
            </div>
        </div>
        <div class="showm">
            <div class="show1">
                <span>赠品总数量</span>
                <input class="show1_1" v-model="num" placeholder="请输入数量" />
            </div>
            <div class="show1">
                <span>用户类型</span>
                <div class="showm1">
                    <div v-for="item in arr" :key="item.id" class="showm2" :class="{p1 : item.state}" @click="chose(item)">
                        {{item.name}}
                    </div>
                </div>
            </div>
            <div class="show1">
                <span>活动日期</span>
                <div class="showm3">
                    <div class="showm3_1" @click="chose1">
                        <span>{{value}}</span>
                        <img src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                    </div>
                </div>
            </div>
            <div class="show1" @click="time1">
                <span>生效日期</span>
                <div class="showm3">
                    <div class="showm3_1"  @click="chose2">
                        <span>{{value1}}</span>
                        <img  src="https://cdn3.axureshop.com/demo/1525603/images/2%E9%97%A8%E5%BA%97%E4%BF%A1%E6%81%AF/u716.png" />
                    </div>
                </div>
            </div>
            <div class="show1">
                <span>使用方式</span>
                <div class="show11">
                    移动端
                </div>
            </div>
        </div>
        <div class="foot1">
           <div class="foot2">
            <p>本活动与店铺满减同享</p>
            <van-switch v-model="checked" active-color="#FFFFFF" inactive-color="#ff6e53" size="24" />
           </div>
        </div>
        <P class="last">温馨提示：活动审核通过后无法修改</P>
        <div class="cr" @click="cr">
            保存
        </div>
        <div class="cr1">

        </div>
        <van-date-picker
                    show-toolbar
                    v-model="currentDate"
					title="选择时间段"
                    :min-date="minDate"
                    :max-date="maxDate"
                    @cancel="cancel"
                    @confirm="onConfirm"
                    @change="onChange"
                    class="t1"
                    v-show="showPicker"
            >
            <template v-slot:tishi>
               <span>
                    请选择时间
               </span>
            </template>
            </van-date-picker>
    </div>
</template>
<script>
import header1 from '../../components/BS/header1View.vue'
import VanDatePicker from '../../components//BS/DoubleTimeView.vue';
import{mapMutations} from 'vuex'
import {moni} from '../../https/MaRk'
import { Toast } from 'vant';
export default {
    data(){
        return{
            h: '',
            num:'',
            obj:[],
            arr:[
            {
                name:'店铺新用户',
                state:false
            },
            {
                name:'店铺所有用户',
                state:false
            },
        ],
            checked: true,
            value:'请选择起止时间',
            value1:'请选择生效时间',
            showPicker: false,
            minDate: new Date(2010, 5, 15),
            maxDate: new Date(2025, 10, 15),
            currentDate: new Date(),
            startDate: '',
            endDate: '',
        }
    },
    created(){
        this.h = window.innerHeight + 'px'
        this.obj = this.$store.state.Bus.manzeng1
        this.value1 = this.$store.state.Bus.date1.length? this.$store.state.Bus.date1.join(',') : '请选择生效时间'
        let a = this.$route.query.name
        this.num = a.have
        this.value = a.acData
        this.value1 = a.effective
        if(a.actype == '店铺新用户'){
            this.arr[0].state = true
        }else{
            this.arr[1].state = true
        }
    },
    components:{
        header1,
        VanDatePicker
    },
    methods:{
        ...mapMutations(['Bus/del1']),
        chose(item){
            this.arr.forEach(item =>{
                item.state = false
            })
            item.state = !item.state
        },
         //打开时间选择器
       chose1(){
        this.showPicker = !this.showPicker
       },
       chose2(){
        
       },
       add(){
        let id = 2
        this.$router.push('/okavi21/'+id)
       },
       del(index){
        this['Bus/del1'](index)
        this.obj = this.$store.state.Bus.manzeng1
       },
       time1(){
        let id = 2
        this.$router.push('/okavi22/'+id)
       },
       shuoming(){
        this.$router.push('/okavi23')
       },
       // 取消
       cancel(){
        this.showPicker = !this.showPicker
       },
       // 确定
        onConfirm(value, index){
            console.log(`当前值：${value}, 当前索引：${index}`)
            this.startDate = value.slice(0,3).join('-')
            this.endDate = value.slice(4,7).join('-')
            this.value = this.startDate + '至' + this.endDate
            this.showPicker = !this.showPicker
        },
        // 改变
        onChange(picker, value, index) {
            console.log(`当前值：${value}, 当前索引：${index}`)
        },
        cr(){
            let obj = ''
            this.arr.forEach(item => {
                if(item.state){
                    obj = item.name
                }
            })
            let data = {
                num: this.num,
                arr : this.obj,
                ob : obj,
                value : this.value,
                value1 : this.value1,
                type : '移动端',
                checked : this.checked
            }
            console.log(data);
            moni(data).then(res =>{
                let that = this
                console.log(res);
                Toast.success({
                message:'修改成功',
                duration:1000,
                onClose(){
                    that.$router.push('/okavi19')
                }
            });
            }).catch(err =>{
                console.log(err);
            })
        }
    }
}
</script>
<style scoped>
.main{
    background-color: #f5f5f5;
}
.show{
    width: 100%;
    min-height: 75px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;

}
.show1{
    width: 90%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.show1_1{
    width: 240px;
    height: 45px;
    background-color: #f5f5f5;
    border-radius: 5px;
    border: none;
    color: #999999;
}
.showm{
    width: 100%;
    height: 315px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}
.showm1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 240px;
    height: 45px;
}
.showm2{
    width: 115px;
    height: 30px;
    border-radius: 30px;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 30px;

}
.showm3{
    width: 240px;
    min-height: 45px;
    background-color: #f5f5f5;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.showm3_1{
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999999;
}
img{
    width: 6px;
    height: 10px;
}
.show11{
    width: 240px;
    height: 45px;
    line-height: 45px;
}
.foot1{
    width: 100%;
    height: 60px;
    font-size: 12px;
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
}
.foot2{
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.last{
    width: 90%;
    margin: 10px auto;
    font-size: 10px;
    color: #797979;
}
.cr{
    width: 90%;
    height: 45px;
    margin: 20px auto;
    line-height: 45px;
    font-size: 15px;
    color: #FFFFFF;
    text-align: center;
    background-color: #ff6e53;
    border-radius: 30PX;
}
.cr1{
    width: 100%;
    height: 30px;
}
.p1{
    background-color: #ffeeee;
    color: #ff6e53;
}
.right{
    font-size: 10px;
}
.www{
    width: 90%;
    height: 165px;
    font-size: 12px;
    border: 1px solid #e4e4e4;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}
.www1{
    width: 90%;
}
.www1 p{
    display: flex;
    justify-content: space-between;
}
.www2{
    width: 10px;
    height: 11px;
}
</style>